<template>
    <div class="index">
      <el-row :gutter="10"  class="index_box"  > <!-- 设定整体高度 -->
        <!-- 左侧 70% -->
        <el-col :span="18">
          <el-row :gutter="20" style="height: 100%;display: flex;flex-direction: column;">
            <el-col :span="24" style="height:50%"> <!-- 高度占50% -->
              <!-- 左上部分 -->
          
                <left-top-section /> <!-- 引入左上组件 -->
             
            </el-col>
            <el-col :span="24" style="flex:1;margin-top: 10px;    height: 48%;   "> <!-- 高度占50% -->
              <!-- 左下部分 -->
           
                <left-bottom-section /> <!-- 引入左下组件 -->
           
            </el-col>
          </el-row>
        </el-col>
  
        <!-- 右侧 30% -->
        <el-col :span="6">
          <el-row :gutter="15" style="height: 100%;display: flex;flex-direction: column;">
            <el-col :span="24" style="height: 75%"> <!-- 高度占80% -->
              <!-- 右上部分 -->
        
                <right-top-section /> <!-- 引入右上组件 -->
           
            </el-col>
            <el-col :span="24" style="margin-top:10px;flex:1"> <!-- 高度占20% -->
              <!-- 右下部分 -->
         
                <right-bottom-section /> <!-- 引入右下组件 -->
             
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import LeftTopSection from '@/components/CompanyPortal/LeftTop.vue';
import LeftBottomSection from '@/components/CompanyPortal/LeftBottom.vue';
import RightTopSection from '@/components/CompanyPortal/RightTop.vue';
import RightBottomSection from '@/components/CompanyPortal/RightBottom.vue';
  export default {
    data() {
      return {};
    },
    components: {
    LeftTopSection,
    LeftBottomSection,
    RightTopSection,
    RightBottomSection
  },
    created() {},
    methods: {},
    mounted() {},
  };
  </script>
  
  <style scoped>
  .index {
    width: 100%;
    height: 100%;
  }
  
  /* 左侧部分样式 */
  .left-top,
  .left-bottom {
  

 
  }
  
  /* 右侧部分样式 */
  .right-top,
  .right-bottom {
  
  }
  .index_box{
    height: 100%;
    display: flex;
  }
  </style>
  